<template>
	<el-dialog :close-on-click-modal="false" :title="titleMap.show" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="right">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="课程类型:" prop="classHourType">
                        <el-radio-group v-model="form.classHourType" size="small">
                            <el-radio label="1">30分钟课时</el-radio>
                            <el-radio label="2">60分钟课时</el-radio>
                            <!-- <el-radio label="4">体验课</el-radio> -->
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="支付方式:" prop="paymentMethod">
                        <el-radio-group v-model="form.paymentMethod" size="small">
                            <el-radio label="1">支付宝</el-radio>
                            <el-radio label="2">微信</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="充值金额:" prop="amount">
                        <el-input v-model="form.amount" placeholder="请输入充值金额" />
                    </el-form-item>
                    <el-form-item label="充值数量:" prop="classHour">
                        <el-input v-model="form.classHour" placeholder="请输入充值数量"/>
                    </el-form-item>
                    <el-form-item label="验证密码:" prop="password">
                        <el-input type="password" v-model="form.password" placeholder="请输入密码"/>
                    </el-form-item>
                </el-col>
            </el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 认</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
        props: {
            url: { type: String, default: () => {return ''} },
        },
		data() {
			return {
				mode: "add",
				titleMap: {
					show: '课时充值'
				},
				visible: false,
				isSaveing: false,
                form: {
                    agentId: null,
                    classHourType: "1",
                    classHour: "",
                    password: "",
                    amount: "",
                    paymentMethod: "1",
                },
                rules: {
                    classHourType: [
                        { required: true, message: '请选择课时类型', trigger: 'change' },
                    ],
                    classHour: [
                        { required: true, message: '请输入充值数量', trigger: 'blur' },
                        { pattern: /^[1-9]\d*$/, message: '只能输入大于0的整数', trigger: 'blur'},
                    ],
                    amount: [
                        { required: true, message: '请输入充值金额', trigger: 'blur' },
                        {
                            pattern: /^0$|^0\.([0-9]{1,2})$|^[0-9]\d{0,8}\.\d{1,2}$|^[0-9]\d{0,8}$/,
							message: "只能输入大于或等于0且最多2位小数的数",
							trigger: "blur",
                        },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                },
                classHourOptions: []
			}
		},
		mounted() {
            
		},
		methods: {
			//显示
			open(title){
				this.visible = true;
                if(title) {
                    this.titleMap.show = title
                }
				return this
			},
            classHourHandle(row) {
                this.classHourOptions.forEach(item => {
                    if (item.number == row) {
                        this.form.amount = item.amount
                    }
                })
            },
            getConfig() {
                let arr = [
                    'recharge_times'
                ]
                this.$API.system.config.get({ key: arr }).then(res => {
                    if (res.error === 0) {
                        this.classHourOptions = res.data.recharge_times
                    }
                }, () => {
                })
            },
			setData(row){
                this.form.agentId = row.id
			},
			async submit() {
                this.$refs.dialogForm.validate(async (valid) => {
                    if (!valid) {
					    return false;
				    }
                    this.isSaveing = true;
                    await this.$API.classHour.createAgent.post(this.form).then(() => {
                        this.visible = false
                        this.$emit('success')
                        this.$notify.success('充值成功')
                    }).finally(() => { this.isSaveing = false; })
                })
			},
		}
	}
</script>

<style scoped>
.elHeight{
	height: 35px;
}
</style>
